<template>
  <RouterView v-slot="{ Component }">
    <Transition :name="tranName">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const tranName = ref('slide')

watch(route, () => {
  console.log('watch history.state.forward', history.state.forward)
  if (history.state.forward) {
    // 后退
    tranName.value = 'fade'
  } else {
    // 前进
    tranName.value = 'slide'
  }
})
</script>

<style lang="scss">
@import './global.scss';

#app > .page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slide-leave-to {
  // transform: translateX(-100%);
  opacity: 0;
}
.slide-leave-active {
  transition: opacity 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: transform 0.3s ease;
}

.fade-leave-to {
  transform: translateX(100%);
}

.fade-leave-active {
  transition: transform 0.5s ease;
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 0.5s ease;
}
</style>
